.solar-system{width:1335px;height:420px;display:flex;position:relative}.sun-card{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10;background:#fff9;border-radius:999px;align-items:center;gap:12px;padding:10px 18px;display:flex;position:absolute;top:0;right:-10px}.sun-card span{font-family:var(--font-primary);font-size:16x}.sun-wrapper{width:42px;height:42px;color:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:20px;transition:transform 2.5s,opacity 2.5s,box-shadow 2.5s,background 2.5s;display:flex}.line{background:#ffffffe6;border-radius:999px;position:absolute}.line-corner{width:22px;height:22px;background:0 0;position:absolute}.vertical-line{width:2px;height:158px;top:54px;right:52px}.second-vertical-line{width:2px;height:36px;top:162px;right:333px}.horizontal-line{width:278px;height:2px;top:232px;right:74px}.second-horizontal-line{width:78px;height:2px;top:140px;right:355px}.third-vertical-line{width:2px;height:52px;top:160px;right:447px}.line-corner-top-right{border-bottom:2px solid #ffffffe6;border-right:2px solid #ffffffe6;border-bottom-right-radius:20px;top:212px;right:52px}.line-corner-mid-right{border-top:2px solid #ffffffe6;border-right:2px solid #ffffffe6;border-top-right-radius:20px;top:140px;right:333px}.line-corner-mid-top-left{border-top:2px solid #fffc;border-left:2px solid #fffc;border-top-left-radius:20px;top:140px;right:427px}.line-corner-mid-left{border-bottom:2px solid #fffc;border-left:2px solid #fffc;border-bottom-left-radius:20px;top:218px;left:162px}.left-line-vertical{width:2px;height:64px;background:#fffc;top:157px;left:162px}.left-line{width:398px;height:2px;background:#fffc;top:238px;left:174px}.energy-dot{width:18px;height:18px;z-index:12;background:#fff;border-radius:50%;position:absolute;box-shadow:0 0 18px #fffffff2,0 0 40px #fffc}.production-circle{width:120px;height:120px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:15;background:#ffffffb2;border:1px solid #fff;border-radius:50%;justify-content:center;align-items:center;transition:all 1s;display:flex;position:absolute;top:170px;right:280px}.production-inner{width:88px;height:88px;z-index:20;background:#fff;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.production-inner:before{content:"";background:conic-gradient(#63d1a7 calc(var(--progress)*1deg),#63d1a726 0deg);border-radius:50%;transition:all 1s;position:absolute;inset:-6px;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 6px),#fff 0);mask:radial-gradient(farthest-side,#0000 calc(100% - 6px),#fff 0)}.usage-circle{height:72px;z-index:15;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:#fffc;border-radius:50px;justify-content:center;align-items:center;padding:15px;display:flex;position:absolute;top:200px;left:450px;box-shadow:0 0 20px #ffffffb3}.usage-icon-view{width:40px;height:40px;background:linear-gradient(#1a3f62 0%,#1a3f624d 100%);border-radius:50px;justify-content:center;align-items:center;margin-inline:5px;display:flex}.usage-inner{text-align:center}.usage-inner h3{font-size:16px;font-family:var(--font-primary);font-weight:800}.usage-inner span{font-size:14px;font-weight:800}.income-circle{max-width:150px;width:100%;max-height:150px;height:100%;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:20;background:#ffffffb2;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;top:8px;left:90px}.income-icon-view{width:60px;height:60px;background:linear-gradient(#63cca6 0%,#63cca666 100%);border-radius:50px;justify-content:center;align-items:center;display:flex}.wallet-icon{width:40px;height:40px;display:flex}.income-inner{text-align:center}.income-inner h3{font-family:var(--font-primaryfa);color:#222;margin-top:5px;font-size:24px;font-weight:800}.income-inner h3.income-big{font-size:18px}.income-inner span{color:#666;font-size:13px;font-family:var(--font-primary);font-weight:800}.production-inner h3{font-family:var(--font-primary);font-size:18px;font-weight:800}.production-inner span{font-size:16px;font-weight:800}@keyframes homeToIncome{0%{top:225px;right:580px}to{top:225px;right:920px}}.energy-dot.power-to-home{animation:2.6s linear infinite powerToHomeHidden}@keyframes powerToHomeHidden{0%{opacity:1;top:225px;right:205px;transform:scale(1)}25%{opacity:1;top:225px;right:420px}45%{opacity:0;top:225px;right:520px;transform:scale(.7)}60%{opacity:0;top:225px;right:640px;transform:scale(.7)}75%{opacity:1;top:225px;right:720px;transform:scale(1)}to{opacity:1;top:225px;right:580px}}.energy-dot{width:18px;height:18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10;background:#fff;border-radius:50%;position:absolute}.energy-dot.solar-to-power{animation:2.2s linear forwards solarToPower}.energy-dot.power-to-home{animation:2s linear forwards powerToHome}.energy-dot.hide-behind-house{animation:1.1s linear forwards hideBehindHouse}.energy-dot.show-from-house{animation:1.1s linear forwards showFromHouse}.energy-dot.to-income{animation:2.7s linear forwards moveToIncome}@keyframes solarToPower{0%{opacity:1;top:46px;right:44px}45%{top:225px;right:44px}to{opacity:1;top:225px;right:305px}}@keyframes powerToHome{0%{top:225px;right:328px}30%{top:130px;right:328px}60%{top:130px;right:438px}to{top:210px;right:438px}}@keyframes hideBehindHouse{0%{opacity:0;top:225px;right:305px}40%{opacity:0;top:225px;right:430px}to{opacity:0;top:225px;right:730px}}@keyframes showFromHouse{0%{opacity:1;top:230px;right:730px}to{opacity:1;top:230px;right:830px}}@keyframes moveToIncome{0%{top:230px;right:830px}50%{top:230px;right:1162px}to{top:0;right:1162px}}